<template>
  <page-drawer class="drawer" v-model="userOpen" :title='title' :icon='icon'>
    <tabs-login-register class="tabs" @success="handleSuccess"/>
    <el-divider content-position="left" class="divider">Suppor</el-divider>
    <drawer-footor class="footor"/>
  </page-drawer>
</template>

<script>
import PageDrawer from './PageDrawer'
import TabLoginRegister from '@/components/form/TabLoginRegister'
import DrawerFootor from '@/views/part/drawer/DrawerFootor.vue'

export default {
  name: 'UserDrawer',
  props: ['open'],
  components: {
    'page-drawer': PageDrawer,
    'tabs-login-register': TabLoginRegister,
    'drawer-footor': DrawerFootor
  },
  data: () => {
    return {
      userOpen: false,
      title: 'Account',
      icon: 'el-icon-user'
    }
  },
  model: {
    prop: 'open',
    event: 'change'
  },
  methods: {
    handleSuccess (name) {
      this.$emit('success', name)
    }
  },
  watch: {
    open: function (val) {
      this.userOpen = val
    },
    userOpen: function () {
      this.$emit('change', this.userOpen)
    }
  }
}
</script>

<style lang="scss" scoped>
  .drawer{

    .tabs{
      margin: 10px 40px;
    }

    .divider{
      margin: 20px 30px;
      height: 3px;
      color: #333333;
      font-size: 16px;
      font-weight: 700;
    }

    .footor{
      margin: 24px 50px 0;
    }

  }
</style>
